import { useStore } from "../hooks/useStore";
import { useKeyboard } from "../hooks/useKeyboard";
import { useEffect } from "react";
import { Cube } from "./Cube";

export const Cubes = () => {
  const [cubes, setAllCubes] = useStore((state) => [
    state.cubes,
    state.setAllCubes,
  ]);
  const { clearCubes } = useKeyboard();

  // 当按下 P 键时清除所有方块
  useEffect(() => {
    if (clearCubes) {
      setAllCubes([]);
    }
  }, [clearCubes, setAllCubes]);

  return cubes.map(({ key, pos, texture }) => {
    return <Cube key={key} position={pos} texture={texture} />;
  });
};
